<template>
	<div class="wrapper">
		<!-- <bottomBar :bottomBarList="bottomList" :getCurrentIndexCb="getCurrentIndex">
			<home v-if="currentPage == 0"></home>
			<lotteryInfo v-if="currentPage == 1"></lotteryInfo>
			<discover v-if="currentPage == 2"></discover>
			<myAccount v-if="currentPage == 3" ref="getUserInfo"></myAccount>
		</bottomBar> -->
		<am-native-tab-container :index="currentPage" :animation="false">
			<am-native-tab-container-item>
				<scroller :show-scrollbar="false" @scroll="scrollHandler">
					<home :selectedIndex="currentPage"></home>
				</scroller>

				 <!-- 导航 -->
				<div class="home-nav" :ref="'minibar'">
					<div class="nav-left" @click="showListCity">
						<text class="nav-left-currentcity">{{formatCity(currentCity)}}</text>
						<image class="nav_currentcity_show" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/test-huicai-admin/arrowdown000.png" alt="arrow-down"></image>
					</div>
					<text class="navbar-title">中彩网</text>
					<div class="nav-right" @click="showdom">
						<image  class="nav-right-img" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/test-huicai-admin/message.png" alt="bell"></image>
					</div>
				</div>
				<div class="home-nav-rev" :ref="'minibar_rev'">
					<div class="nav-left" @click="showListCity">
						<text class="nav-left-currentcity-rev">{{formatCity(currentCity)}}</text>
						<image class="nav_currentcity_show" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/test-huicai-admin/arrow%20down.png" alt="arrow-down"></image>
					</div>
					<text class="navbar-title"></text>
					<div class="nav-right" @click="showdom">
						<image  class="nav-right-img" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/test-huicai-admin/message_w.png" alt="bell"></image>
					</div>
				</div>
				<!-- 城市选择 -->
  				<wxc-city ref="wxcCity" :animationType="animationType" :currentLocation="location" :cityStyleType="cityStyleType" :sourceData="sourceData" @wxcCityItemSelected="citySelect"></wxc-city>
			</am-native-tab-container-item>
			<am-native-tab-container-item>
				<wxc-minibar  :use-default-return="false"  title="开奖信息">
					<image src="" slot="left"></image>
				</wxc-minibar>
				<scroller :show-scrollbar="false">
					<lotteryInfo :selectedIndex="currentPage"></lotteryInfo>
				</scroller>
			</am-native-tab-container-item>
			<am-native-tab-container-item>
				<wxc-minibar :use-default-return="false"   title="发现">
					<image src="" slot="left"></image>
      			</wxc-minibar>

				<div class="discover-head">
					<div class="discover-item" v-for="(img,index) in discoverCon" :key="index+1/3" @click="routeract(img.href)">
						<image class="discover-img" :src="img.img" :alt="img.name"></image>
						<text class="discover-name">{{img.name}}</text>
					</div>
				</div>

				<scroller :show-scrollbar="false">
					<discover :selectedIndex="currentPage"></discover>
				</scroller>
			</am-native-tab-container-item>
			<am-native-tab-container-item>
				<scroller :show-scrollbar="false">
					<myAccount :selectedIndex="currentPage"></myAccount>
				</scroller>
			</am-native-tab-container-item>
		</am-native-tab-container>

		<am-tab-bar>
			<am-tab-bar-item v-for="(item, index) in bottomList" tintColor="#ff0000" :unselectedTintColor="'#333333'" :key="item.title" :image="item.src" :imageActive="item.activeSrc" :title="item.title" :imageSize="[58,54]" :selected="currentPage === index"
			  @click="getCurrentIndex(index)" />
		</am-tab-bar>

		<new-red-pack v-if="isShow" ref="new-red"></new-red-pack>
		<red-pack-list v-if="isShow1"></red-pack-list>
	</div>
</template>
<style>

.weex-slider-cell {
	overflow: visible !important;
}
</style>

<style scoped>

/* 发现页 */
.discover-head{
	width:750px;
	height:152px;
	padding:29px 40px;
	background-color: #fff;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.discover-item{
	justify-content: center;
	align-items: center;
}
.discover-img{
	width: 94px;
	height: 94px;
}
.discover-name{
  font-size:24px;
  color: #333;
  font-family:PingFangSC-Regular;
}

/* 发现页 end*/

.wrapper {
  width: 750px;
  background-color: #f2f3f4;
}


/* 首页 */


.nav-right {
	height: 90px;
	padding-right:32px; 
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	/* flex: 1 0 auto; */
	display: flex;
	width:250px;
}

.home-nav-rev {
  background-color: transparent;
  flex-direction: row;
  justify-content: space-between;
  height: 90px;
  align-items: center;
  position: absolute;
  width: 750px;
  opacity: 1;
  top: 0;
  left: 0;
}

.navbar-title {
  	font-size: 34px;
	text-align: center;
    font-weight: bold;
    color: #333333;
    /* flex: 1 0 auto; */
    position: relative;
	display: flex;
	height: 90px;
	align-items: center;
	justify-content: center;
	width:250px;
	line-height:90px;
	/* top:50%;
	transform: translateY(-50%) */
	/* transform: translate(-50%,0 ) */
}

.home-nav {
  background-color: #fff;
  flex-direction: row;
  /* justify-content: space-between; */
  height: 90px;
  /* align-items: center; */
  position: absolute;
  width: 750px;
  opacity: 0;
  top: 0;
  left: 0;
}

.nav-left {
    padding-left:32px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
    box-sizing: border-box;
	height: 90px;
	/* flex: 1 0 auto; */
	width:250px;
}

.nav-left-currentcity {
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 7px;
  padding-left: 7px;
  font-size: 24px;
}

.nav_currentcity_show {
  width: 20px;
  height: 20px;
  align-self: center;
  margin-left: 10px;
}


.nav-right-img {
  width: 30px;
  height: 30px;
}

.nav-left-currentcity-rev {
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 7px;
  padding-left: 7px;
  font-size: 24px;
  color: #ffffff;
  border-color: #ffffff;
}
</style>

<script>
// import bottomBar from "@/components/modules/bottom-bar/index.js";
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
import localData from "./js/localData.js";
import home from "components/home/home";
import discover from "components/home/discover";
import lotteryInfo from "components/home/lottery-info";
import myAccount from "components/home/my-account";
import newRedPack from 'components/diago/new_red_packets';
import redPackList from 'components/diago/red_packets';
import { getBaseUrl } from "@/utils/index.js";
import { AmNavBar, AmTabBar, AmTabBarItem, AmNativeTabContainer, AmNativeTabContainerItem } from 'weex-amui'
import { WxcCity } from "weex-ui";
import sourceData from "@/js/city.js";
import { discoverHead } from "@/js/global/index_data.js"

const storage = weex.requireModule("storage");
const modal = weex.requireModule("modal");
let navigator = weex.requireModule("navigator");
let newPack = new BroadcastChannel('app')
const animation = weex.requireModule("animation");

export default {
	components: {
		WxcCity,
		WxcMinibar,
		home,
		lotteryInfo,
		discover,
		myAccount,
		// bottomBar,
		
		AmNavBar, 
		AmTabBar, 
		AmTabBarItem, 
		AmNativeTabContainer,
		AmNativeTabContainerItem,
		newRedPack,
		redPackList
	},

	data(){
		return {
			bottomList: localData.bottomBarList,
			currentPage: 0,
			currentThemeColor: "#FF8C19",
			isShow:false,
			isShow1:false,
			currentCity:'选择城市',
			animationType: "push",
			location: "定位中",
			cityStyleType: "list",
			sourceData,
			discoverCon:discoverHead
		}
	},
	created() {
		this.baseURL = getBaseUrl(weex.config.bundleUrl, true);
		this.setToken()
		newPack.onmessage =  (event)=> {
           this.setToken()
		}
		
		// 定位
		try {
			weex.requireModule("eventLocationModule").locationWithType("city")
			sxglobalEvent.addEventListener("sxlocation", params => {
				this.setlocation(params);
				this.location = params.city;
			})
		} catch (e) {
			console.log("无GPS设备,无法调用定位");
		}
	},

	beforeCreate() {
		var domModule = weex.requireModule('dom');
		
		domModule.addRule('fontFace', {
			'fontFamily': "iconfttf",
			'src': "url('http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/iconfont.ttf')"
		});
		domModule.addRule('fontFace', {
			'fontFamily': "iconwoff",
			'src': "url('http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/iconfont.woff')"
		});      
	},
  
	methods: {

		routeract(href) {
			if(!!href) {
				navigator.push({
					url: this.baseURL + `views/${href}/${href}.js`,
					animated: "true"
				})
				return false
			}else{
				modal.toast({ message: "暂未开放，敬请期待" });
			}
		},

		scrollHandler(e) {

			this.eventCnt = this.eventCnt + 1

			let ratio = - e.contentOffset.y / 200

			if (ratio > 1) ratio = 1

			let bar = this.$refs.minibar;
			let bar_rev = this.$refs.minibar_rev

			animation.transition(bar,{
				styles: { opacity: ratio },
				duration: 100, //ms
				timingFunction: "ease",
				delay: 0 //ms
			})

			animation.transition(bar_rev,{
				styles: { opacity: 1 - ratio },
				duration: 100, //ms
				timingFunction: "ease",
				delay: 0 //ms
			})
		},

		async setlocation(location) {
			//location 为gps定位;
			//userchose_location 为用户首页选择的定位;
			let getuserchose_location = await this.getStorage("userchose_location") //查询用户自定义定位

			if (getuserchose_location.data !== "undefined") {
				//如果用户自定义定位则不进行替换
				this.currentCity = getuserchose_location.data
				return;
			}

			let getlocation = await this.getStorage("location"); //查询本地是否有定位信息

			if (getlocation.data !== "undefined") {
				this.currentCity = getlocation.data;
				if (getlocation.data !== location.city) {
					//查询本地用户定位是否和当前gps定位一致
					const question = `是否切换至${location.city}`;
					let confirm = await this.Confirm(question);

					if (confirm === "确定") {
						let setlocation = await this.setStorage("location", location.city);
						this.currentCity = location.city;
					}
				}
			} else {
					//如果没有  询问是否设置
					const question = `是否定位至${location.city}`;
					let confirm = await this.Confirm(question);
				if (confirm === "确定") {
					let setlocation = await this.setStorage("location", location.city);
					this.currentCity = location.city;
				}
			}
		},

		async citySelect(e) {
			this.currentCity = ( !!e.item.cityName || !!e.item.name ) && e.item.cityName || e.item.name
			let setlocation = await this.setStorage( "userchose_location", e.item.cityName)
		},

		setStorage(name, value) {
			//设置name的缓存信息value
			return new Promise((resolve, rejects) => {
				storage.setItem(name, value, event => {
				if (event.result === "success") {
					resolve(1);
				} else {
					rejects(0);
				}
				});
			});
		},
		
		getUserPosition(GPScity) {
			this.Confirm(`是否定位至${GPScity}`).then(value => {
				if (value === "确定") {
					this.currentCity = GPScity; //home
					this.location = GPScity; //选择
					//需要设置缓存
					this.setStorage("location", GPScity)
				}
			})
		},

		formatCity(city) {
			return city.length > 4 ? ( city.slice(0, 4) + "..." ) : city
		},
		 
		setToken() {
			storage.getItem('loginCount', event=>{//展示新人红包弹窗
				if(event.data == 'undefined') {//未登录
						storage.getItem("flagTC",event=>{//是否弹红包弹窗
							if(event.data =="undefined"){
							this.isShow=true;
							storage.setItem("flagTC","true");
							}	
					});
				}else if(event.data == 1){
					storage.getItem("flagTC1",event=>{//为了防止返回还弹出弹窗
						if(event.data =="undefined"){
							//用户首次登录，展示优惠券列表页
							this.isShow1=true;
							this.isShow=false;
							storage.setItem("flagTC1","true");
						}
					})
				}
			})
		},

		showListCity() {
			this.cityStyleType = "group";
			this.$refs["wxcCity"].show();
		},
		showGroupCity() {
			this.cityStyleType = "group";
			this.$refs["wxcCity"].show();
		},

		getCurrentIndex(index) {
			this.currentPage = index;
			console.log(index)
			if( index === 3) {
				storage.getItem('token', event=>{
					if(!event.result || event.data == 'undefined') {
						navigator.push({
							'url': this.baseURL + 'views/login/login.js',
							'animated': 'true'
						})
					}
				})
			}

		},
	
	}
};
</script>
